<template>
  <div id="app">
    <Meta v-if="info.title!==undefined" pagealias="jobfairshow" :custom_data="{title:info.title}" />
    <Head>招聘会详情</Head>
    <div class="b1">
      <div class="content">
        <div class="t1">
          <span :class="'st holddate'+info.holddate">{{info.holddate_text}}</span>{{info.title}}
        </div>
        <div class="t2 substring">主办方：{{info.sponsor}}</div>
        <div class="t2 substring">举办时间：{{info.holddate_start | timeFilter}} 至 {{info.holddate_end | timeFilter}}</div>
        <div class="t2 substring">举办地点：{{info.address}}</div>
      </div>
      <div class="n_box">
        <div class="n_item"><div class="t1">参会企业</div><div class="t2">{{info.company_num}}</div></div>
        <div class="n_item"><div class="t1">招聘职位</div><div class="t2">{{info.jobs_num}}</div></div>
        <div class="n_item"><div class="t1">浏览次数</div><div class="t2">{{info.click}}</div></div>
      </div>
    </div>
    <div class="b2">
      <div class="b_nav">
        <div :class="'n_item '+(tab=='show'?'active':'')" @click="changeTab" data-type="show">招聘会详情</div>
        <div :class="'n_item '+(tab=='comlist'?'active':'')" @click="changeTab" data-type="comlist">参会企业</div>
        <div :class="'n_item '+(tab=='reserve'?'active':'')" @click="changeTab" data-type="reserve">在线预订</div>
        <div :class="'n_item '+(tab=='traffic'?'active':'')" @click="changeTab" data-type="traffic">交通路线</div>
      </div>
      <!--招聘会详情-->
      <div v-show="tab=='show'" class="bn_1">
        <div class="if_content">
          <p class="if_title editor-content-view">招聘会简介</p>
          <span style="white-space: pre-line;" v-html="info.introduction"></span>
          <img class="intro_img" v-if="info.intro_img" :src="info.intro_img" alt="简介配图">
        </div>
        <div class="if_content" v-if="info.participants_object">
          <p class="if_title">参会对象</p>
          <div class="c_line">{{ info.participants_object }}</div>
        </div>
        <div class="if_content" v-if="info.price">
          <p class="if_title">摊位设置及费用</p>
          <div class="c_line">{{ info.price }}</div>
        </div>
        <div class="if_content" v-if="info.registration_method">
          <p class="if_title">参会报名办法</p>
          <div class="c_line">{{ info.registration_method }}</div>
        </div>
      </div>
      <!--参会企业-->
      <div v-show="tab=='comlist'" class="bn_2">
        <van-list
          v-if="companylist.length > 0"
          v-model="loading"
          :finished="finished"
          :finished-text="finished_text"
          @load="onLoad"
          :immediate-check="true"
        >
          <div  class="c_item" v-for="(item, index) in companylist" :key="index" @click="toCompanyDetail(item.id)">
            <div class="c_name substring">{{item.companyname}}</div>
            <div class="c_number">展位号：{{item.position}}</div>
            <div v-if="item['jobs_num']>0" class="c_jg">
                <a class="cj" v-for="(job,i) in item['jobs_list']" :key="i" @click.stop="toJobsDetail(job.id)">{{job.jobname}}</a>
              <div class="clear"></div>
            </div>
          </div>
          <!--没有企业-->
          <div v-if="companylist.length <= 0" class="company_not">
            <div class="i_not"></div>
            <div class="i_txt">本次招聘会还没有企业报名</div>
          </div>
        </van-list>
      </div>
      <!--在线预订-->
      <div v-show="tab=='reserve'" class="bn_3">
        <div class="field_g">
          <van-field
            readonly
            clickable
            value=""
            label="展位预订"
            placeholder="查看展位图"
            input-align="right"
            class="form_choose reset_after"
            @click="positionImg"
          />
          <van-field v-if="info.is_reserve==1"
            readonly
            :value="info.position"
            label="已预定展位号"
            input-align="right"
            class="reset_after"
          />
        </div>
        <div v-if="info.is_reserve==0 && info.predetermined==1" class="field_g">
          <van-field
            readonly
            clickable
            :value="positionVal.area"
            label="选择展区"
            placeholder="请选择"
            input-align="right"
            class="form_choose reset_after"
            @click="showAreaPicker = true"
          />
          <van-field v-if="positionVal.area!=''"
            readonly
            :clickable="!positionVal.positionShow"
            :value="positionVal.position"
            :disabled="positionVal.positionShow"
            label="选择展位"
            placeholder="请选择"
            input-align="right"
            class="form_choose reset_after"
            @click="showPositionPicker = !positionVal.positionShow ? true :false"
          />
          <van-field
            v-model="reserve.contact"
            label="联系人"
            placeholder="请填写"
            input-align="right"
            class="reset_after"
          />
          <van-field
            v-model="reserve.mobile"
            label="手机号"
            placeholder="请填写"
            input-align="right"
            class="reset_after"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" @click="onReserve">企业报名</van-button>
          </div>
        </div>
        <!--未开始报名-->
        <div v-if="info.is_reserve==0 && info.predetermined==0" class="st_box">
          <div class="i_not"></div>
          <div class="i_txt">本次招聘会还未开始报名</div>
          <div class="i_txt">开始报名时间:{{info.predetermined_start | timeFilter}}</div>
        </div>
        <!--停止报名-->
        <div v-if="info.is_reserve==0 && info.predetermined==2" class="st_box">
          <div class="i_stop"></div>
          <div class="i_txt">该场招聘会已停止报名</div>
        </div>
        <!--预订成功-->
        <div v-if="info.is_reserve==1 && info.reserve_status==1" class="st_box">
          <div class="i_success"></div>
          <div class="i_txt">该展位已预订成功</div>
        </div>
        <!--等待审核-->
        <div v-if="info.is_reserve==1 && info.reserve_status==2" class="st_box">
          <div class="i_audit"></div>
          <div class="i_txt">已预订该展位，等待审核</div>
        </div>
      </div>
      <!--交通路线-->
      <div v-show="tab=='traffic'" class="bn_4">
        <div class="des">
          举办地址：{{info.address}}
          乘车路线：{{info.bus}}
        </div>
        <baidu-map
          class="b_map"
          :ak="$store.state.config.map_ak"
          :center="center"
          :zoom="zoom"
          :map-click="false"
        ></baidu-map>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="changeTab" data-type="reserve">在线预订</van-button>
        </div>
      </div>
    </div>
    <div class="bm" @click="toReserve"></div>
    <van-popup
      v-model="showLogin"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Login
        :utype="1"
        :single_login="true"
        @afterLogin="afterLogin"
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </van-popup>
    <van-popup v-model="showAreaPicker" round position="bottom">
      <van-picker
        title="请选择展区"
        show-toolbar
        :columns="position"
        value-key="area"
        @cancel="showAreaPicker = false"
        @confirm="onAreaConfirm"
      />
    </van-popup>
    <van-popup v-model="showPositionPicker" round position="bottom">
      <van-picker
        title="请选择展位"
        show-toolbar
        :columns="positions"
        value-key="position"
        @cancel="showPositionPicker = false"
        @confirm="onPosiotionConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import wxshare from '@/assets/js/share.js'
import { parseTime } from '@/utils/index'
import http from '@/utils/http'
import api from '@/api'
import Login from '@/components/Login'
import { ImagePreview } from 'vant'
let isSpider = new RegExp('^(Baiduspider|YisouSpider|Sogou|Googlebot|Sosospider|bingbot|360Spider)').test(navigator.userAgent)
Vue.component('BaiduMap', function (resolve, reject) {
  if (!isSpider) {
    require(['vue-baidu-map/components/map/Map.vue'], resolve)
  }
})
export default {
  name: 'Show',
  components: {
    Login
  },
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{m}月{d}日 {h}:{i}')
    }
  },
  data () {
    return {
      is_company_login: !1,
      showLogin: !1,
      tab: 'show',
      info: {},
      companylist: [],
      loading: !1,
      finished: !1,
      finished_text: '',
      page: 1,
      pagesize: 15,
      position: [],
      positions: [],
      center: {lng: this.$store.state.config.map_lng, lat: this.$store.state.config.map_lat},
      zoom: 12,
      showAreaPicker: !1,
      showPositionPicker: !1,
      reserve: {
        jobfair_id: 0,
        position_id: 0,
        contact: '',
        mobile: ''
      },
      positionVal: {
        area: '',
        position: '',
        positionShow: !1
      }
    }
  },
  created () {
    this.is_company_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 1
    this.reserve.jobfair_id = this.$route.params.id
    this.getJobfairShow()
    this.getCompanylist(!0)
    this.getPosition()
  },
  methods: {
    afterLogin (data) {
      this.showLogin = false
      this.is_company_login = true
    },
    closeLogin () {
      this.showLogin = false
    },
    getJobfairShow: function () {
      var t = this
      http.get(api.jobfair_show, {id: t.reserve.jobfair_id}).then(r => {
        var config = this.$store.state.config
        if (r.data.company_contact) {
          t.reserve.contact = r.data.company_contact.contact
          t.reserve.mobile = r.data.company_contact.mobile
        }
        t.info = r.data.info
        t.center = {
          lng: r.data.info.map_lng || config.map_lng,
          lat: r.data.info.map_lat || config.map_lat
        }
        t.zoom = r.data.info.map_zoom || config.map_zoom
        let wechatShareInfo = {
          title: t.info.title,
          imgUrl: t.info.thumb
        }
        wxshare(wechatShareInfo, 'jobfairshow', location.href)
      }).catch(() => {})
    },
    changeTab: function (e) {
      if (this.is_company_login !== true && e.target.dataset.type == 'reserve') {
        this.$dialog
          .confirm({
            title: '提示',
            message: '当前操作需要登录企业账号',
            confirmButtonText: '去登录'
          })
          .then(() => {
            this.showLogin = true
            this.after_login_data = {}
          })
          .catch(() => {})
      } else {
        this.tab = e.target.dataset.type
      }
    },
    getCompanylist: function (init) {
      var t = this
      http.get(api.jobfair_comlist, {id: t.reserve.jobfair_id, page: t.page, pagesize: t.pagesize}).then(r => {
        if (init === true) {
          this.companylist = [...r.data.items]
        } else {
          this.companylist = this.companylist.concat(r.data.items)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (r.data.items.length < this.pagesize) {
          this.finished = true
          if (init === false) {
            this.finished_text = '没有更多了'
          }
        }
      }).catch(() => {})
    },
    onLoad: function () {
      this.page++
      this.getCompanylist(!1)
    },
    getPosition: function () {
      var t = this
      http.get(api.jobfair_position, {id: t.reserve.jobfair_id}).then(r => {
        t.position = r.data.items
      }).catch(() => {})
    },
    toCompanyDetail: function (id) {
      this.$router.push('/company/' + id)
    },
    toJobsDetail: function (id) {
      this.$router.push('/job/' + id)
    },
    toReserve: function () {
      this.$router.push('/jobfair/reserve')
    },
    positionImg: function () {
      ImagePreview(this.info.position_img)
    },
    onAreaConfirm: function (v, k) {
      if (this.positionVal.area != v.area) {
        var temp = []
        for (var i in v.positions) {
          if (v.positions[i]['status'] == 0) {
            temp.push({id: v.positions[i]['id'], position: v.positions[i]['position']})
          }
        }
        if (temp.length <= 0) {
          this.positionVal.positionShow = !0
          this.positionVal.position = '暂无可选展位'
        } else {
          this.positionVal.positionShow = !1
          this.positionVal.position = ''
        }
        this.positionVal.area = v.area
        this.reserve.position_id = 0
        this.positions = [...temp]
      }
      this.showAreaPicker = !1
    },
    onPosiotionConfirm: function (v, k) {
      this.positionVal.position = v.position
      this.reserve.position_id = v.id
      this.showPositionPicker = !1
    },
    onReserve: function () {
      var t = this
      http.post(api.jobfair_reserve, this.reserve).then(r => {
        t.info.is_reserve = r.data.is_reserve
        t.info.position = r.data.position
        t.info.status = r.data.status
        this.$notify({ type: 'success', message: r.message })
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
  .bm {
    position: fixed;right: 15px;bottom: 55px;width: 45px;height: 45px;border-radius: 45px;
    background: rgba(0,0,0,0.5) url("../../assets/images/jobfairlist/6.png") center center no-repeat;
    background-size: 28px;
  }
  .b2 {
    .bn_4 {
      padding: 13px 17px;
      .b_map {
        width: 340px;height: 116px;margin: 10px auto 0;border: 1px solid #e4e4e4;
      }
      .des {
        line-height: 1.8;font-size: 13px;color: #666;word-break: break-all;
      }
    }
    .bn_3 {
      .st_box {
        .i_audit {
          width: 60px;height: 118px;margin: 0 auto 10px;
          background: url("../../assets/images/jobfairlist/5.png") 0 bottom no-repeat;background-size: 60px;
        }
        .i_success {
          width: 60px;height: 118px;margin: 0 auto 10px;
          background: url("../../assets/images/jobfairlist/4.png") 0 bottom no-repeat;background-size: 60px;
        }
        .i_stop {
          width: 60px;height: 118px;margin: 0 auto 10px;
          background: url("../../assets/images/jobfairlist/3.png") 0 bottom no-repeat;background-size: 60px;
        }
        .i_not {
          width: 60px;height: 118px;margin: 0 auto 10px;
          background: url("../../assets/images/jobfairlist/2.png") 0 bottom no-repeat;background-size: 60px;
        }
        .i_txt {
          margin-bottom: 5px;font-size: 13px;color: #999;
        }
        width: 100%;height: 260px;text-align: center;
      }
    }
    .bn_2 {
      .c_item {
        .c_jg {
          .cj {
            display: block;float: left;margin: 0 15px 5px 0;font-size: 13px;color: #666;text-decoration: none;
          }
        }
        .c_number {
          margin: 3px 0 7px;font-size: 13px;color: #1787fb;
        }
        .c_name {
          font-size: 15px;font-weight: bold;color: #333;
        }
        padding: 12px 0 5px;border-bottom: 1px solid #f3f3f3;
      }
      .company_not {
        .i_not{
          width: 60px;height: 118px;margin: 0 auto 10px;
          background: url("../../assets/images/jobfairlist/7.png") 0 bottom no-repeat;background-size: 60px;
        }
        .i_txt {
          margin-bottom: 5px;font-size: 13px;color: #999;text-align:center
        }
      }
      padding: 0 17px;
    }
    .bn_1 {
      padding-bottom: 20px;
      .if_title { font-size: 14px;font-weight: bold;color: #333;margin-bottom: 5px; }
      .if_content {
        .c_line { text-indent: 1em; }
        padding: 13px 17px 0;line-height: 1.8;font-size: 13px;color: #666;word-break: break-all;
        .intro_img { max-width: 340px; }
      }
    }
    .b_nav {
      display: flex;width: 375px;border-bottom: 2px solid #f3f3f3;
      .n_item {
        &.active {
          position: relative;color: #333;font-weight: bold;
          &::after {
            content: '';position: absolute;left: 50%;bottom: 1px;transform: translate(-50%, 0);width: 30%;height: 1.5px;
            background-color: #1787fb;
          }
        }
        flex: 1;padding: 10px 0;font-size: 14px;color: #999;text-align: center;
      }
    }
  }
  .b1 {
    width: 375px;padding: 0 17px 0 17px;border-top: 1px solid #f3f3f3;
    .n_box {
      .n_item {
        flex: 1;position: relative;text-align: center;
        &:not(:first-child) {
          &::before {
            content: '';position: absolute;left: 0;top: 50%;transform: translate(0, -50%);height: 17px;
            border-left: 1px solid #ececec;
          }
        }
        .t1 {
          font-size: 12px;color: #333;margin-bottom: 3px;
        }
        .t2 {
          font-size: 18px;color: #333;font-weight: bold;
        }
      }
      display: flex;width: 340px;padding: 13px 0 10px;margin: 0 auto 8px;background: #f5f5f5;
    }
    .content {
      .t2 {
        margin-bottom: 5px;font-size: 13px;color: #999;
      }
      .t1 {
        font-size: 15px;color: #333;font-weight: bold;word-break: break-all;line-height: 1.8;margin-bottom: 5px;
        .st {
          padding: 1px 6px;font-size: 10px;border-radius: 18px;margin-right: 5px;vertical-align: middle;
          &.holddate1 {
            color: #ff6363;border: 1px solid #ff6363;
          }
          &.holddate0 {
            color: #ff8800;border: 1px solid #ff8800;
          }
          &.holddate2 {
            color: #999;border: 1px solid #999;
          }
        }
      }
      padding: 20px 0 10px 0;
    }
  }
</style>
